<template>
  <div class="component-base-config">
    <div
      class="content-pad-item__title with-tag"
      :class="{ 'is-open': fontContentVisible }"
      @click.stop="changeVisible"
    >
      字体设置
    </div>
    <el-collapse-transition>
      <div v-show="fontContentVisible">
        <div class="content-pad-row">
          <config-form-item label="标题" :label-width="64">
            <el-input v-model="fontConfig.titleContent" :maxlength="20" />
          </config-form-item>
        </div>
        <div class="content-pad-row">
          <config-form-item label="字体" :label-width="64">
            <el-color-picker v-model="fontConfig.titleColor" />
            <el-button
              :type="fontConfig.titleBold ? 'primary' : 'default'"
              icon="ri-bold"
              style="margin-left: 8px"
              @click="changeTitleBold"
            />
            <el-button
              :type="fontConfig.titleItalic ? 'primary' : 'default'"
              icon="ri-italic"
              @click="changeTitleItalic"
            />
            <el-input-number
              v-model="fontConfig.titleSize"
              :step="1"
              :min="12"
              controls-position="right"
              style="margin-left: 8px"
            />
          </config-form-item>
        </div>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
import { objectDeepClone } from '../../../untils/commonUtils';
export default {
  name: 'MFont',
  data(){
    return{
      fontContentVisible:false,
      defaultConfig: {
        titleBold: false,
        titleItalic: false,
        unitBold: false,
        unitItalic: false,
      },
      fontConfig:{...defineCofig},

    }
  },
  computed: { 
    acComponent(){
      return this.$store.state.imageDragMoudules.acComponent;
    }
  },
  methods:{
    changeVisible(){
       fontContentVisible = !fontContentVisible;
    },
    changeTitleBold(){
      fontConfig.titleBold = !fontConfig.titleBold;
    },
    changeTitleItalic(){
      fontConfig.titleItalic = !fontConfig.titleItalic;
    }
  },
  watch:{
    'acComponent.id'(newVal,oldVal){
      fontContentVisible = true;
        !!vnewVall &&
          objectDeepClone(fontConfig, toRaw(store.state.acComponent.font));
    },
    fontConfig(newVal,oldVal){
      this.$store.commit('updateComponent', { newState: fontConfig, key: 'font' });
    }
  }
}
</script>